<template>
	<view class="home">
		<view class="top-main">
			<view class="home-title">星澜国际</view>
			<view class="search-box">
				<view class="search-tabs u-flex u-flex-items-center u-flex-between">
					<view class="tabs-item u-flex u-flex-items-center">
						<up-icon name="map-fill" color="#ffffff" size="18"></up-icon>
						<text class="tabs-name">资料填写</text>
					</view>
					<view class="tabs-item u-flex u-flex-items-center">
						<up-icon name="map-fill" color="#ffffff" size="18"></up-icon>
						<text class="tabs-name">双重审核</text>
					</view>
					<view class="tabs-item u-flex u-flex-items-center">
						<up-icon name="map-fill" color="#ffffff" size="18"></up-icon>
						<text class="tabs-name">递交使馆</text>
					</view>
					<view class="tabs-item u-flex u-flex-items-center">
						<up-icon name="map-fill" color="#ffffff" size="18"></up-icon>
						<text class="tabs-name">成功出签</text>
					</view>
				</view>
				<up-search placeholder="搜索" v-model="keyword" :showAction="false" disabled
					bgColor="#ffffff"></up-search>
			</view>
			<view class="banner-box">
				<up-swiper height="40vh" :list="bannerList" indicator indicatorMode="line" circular></up-swiper>
			</view>
		</view>
		<view class="navbar-main u-flex u-flex-items-center u-flex-wrap">
			<view class="navbar-item">
				<image src="@/static/images/icon/icon_qzbl.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">签证办理</view>
			</view>
			<view class="navbar-item">
				<image src="@/static/images/icon/icon_cjjy.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">出境教育</view>
			</view>
			<view class="navbar-item">
				<image src="@/static/images/icon/icon_lxyx.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">游学研学</view>
			</view>
			<view class="navbar-item">
				<image src="@/static/images/icon/icon_swch.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">商务出海</view>
			</view>
			<view class="navbar-item" @click="toNews">
				<image src="@/static/images/icon/icon_zixun.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">资讯分享</view>
			</view>
			<view class="navbar-item">
				<image src="@/static/images/icon/icon_hwsh.png" mode="aspectFill" class="navbar-icon"></image>
				<view class="navbar-name">海外生活</view>
			</view>
		</view>
		<view class="service-main">
			<view class="tabs-box">
				<up-tabs :list="tabsList" :current="current" @click="onTabsChange"></up-tabs>
			</view>

			<view class="product-list">
				<view class="product-item" v-for="(item, index) in productList" :key="index" @click="onCountry">
					<image class="product-pic" src="@/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg"
						mode="aspectFill"></image>
					<view class="product-info">
						<view class="name">{{ item }}</view>
						<view class="price">￥120起</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增留学热门国家模块 -->
		<view class="study-title">留学热门国家</view>
		<view class="country-list u-flex u-flex-wrap">
			<view class="country-item" v-for="(item, index) in countryList" :key="index" @click="toProduct(item)">
				<image class="country-flag" :src="item.flag" mode="aspectFill"></image>
				<view class="country-content">
					<view class="country-name">{{ item.name }}</view>
					<view class="country-advantages">
						<text v-for="(adv, i) in item.advantages" :key="i" class="advantage-tag">{{ adv }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="news-main">
			<view class="news-title">热门资讯</view>
			<view class="news-item" v-for="item in 3" :key="item">
				<image class="news-pic" src="@/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg" mode="aspectFill">
				</image>
				<view class="news-info">
					<view class="news-name">测试标题测试标题</view>
					<view class="news-desc">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容内容测试内容测试内容测试内容</view>
					<view class="news-info-bottom">
						<view class="news-time">2025-05-13</view>
						<view class="news-reading-number">阅读量：2832</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import banner1 from "@/static/images/f1aff8101ab21895fa418534474acd79.jpeg";
	// 添加国旗图片导入
	import flagUS from "@/static/images/flags/us.png";
	import flagUK from "@/static/images/flags/uk.png";
	import flagRU from "@/static/images/flags/rus.png";
	import flagJP from "@/static/images/flags/jpn.png";
	import flagNL from "@/static/images/flags/nl.png";
	import flagBR from "@/static/images/flags/br.png";

	let keyword = ref("");
	let bannerList = ref([banner1]);
	let current = ref(0);
	let tabsList = ref([
		{ name: "热门" },
		{ name: "亚洲" },
		{ name: "美洲" },
		{ name: "大洋洲" },
		{ name: "欧洲" },
		{ name: "非洲" },
	]);
	let productList = ref(["日本", "韩国", "泰国", "澳大利亚", "美国", "法国"]);
	// 新增留学国家列表(包含优势)
	let countryList = ref([
		{
			name: "美国",
			flag: flagUS,
			advantages: ["顶尖大学", "就业机会多", "奖学金丰富"],
		},
		{
			name: "英国",
			flag: flagUK,
			advantages: ["学制短", "文化底蕴深", "教育质量高"],
		},
		{
			name: "俄罗斯",
			flag: flagRU,
			advantages: ["学费低廉", "艺术教育强", "中俄关系好"],
		},
		{
			name: "日本",
			flag: flagJP,
			advantages: ["文化相近", "科技发达", "奖学金多"],
		},
		{
			name: "荷兰",
			flag: flagNL,
			advantages: ["英语授课", "国际化程度高", "学费合理"],
		},
		{
			name: "巴西",
			flag: flagBR,
			advantages: ["葡语优势", "文化多元", "生活成本低"],
		},
	]);

	function onTabsChange(e : any) {
		current.value = e.index;
	}
	function onCountry() {
		uni.$u.route({
			url: "/pages/goods/list",
		});
	}
	function toNews() {
		uni.navigateTo({
			url: "/pages/news/list",
		});
	}

	function toProduct(item : any) {
		uni.navigateTo({
			url: `/pages/product/detail?country=${item.name}`,
		});
	}
</script>

<style scoped lang="scss">
	.home {
		.top-main {
			height: 40vh;
			width: 100%;
			position: relative;

			.home-title {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #ffffff;
				padding-top: var(--status-bar-height);
				z-index: 100;
				box-sizing: border-box;
			}

			.search-box {
				width: 90%;
				position: absolute;
				left: 50%;
				top: 180rpx;
				transform: translateX(-50%);
				z-index: 100;

				.search-tabs {
					margin-bottom: 20rpx;

					.tabs-item {
						.tabs-name {
							font-size: 28rpx;
							color: #ffffff;
						}
					}
				}
			}

			.banner-box {
				height: 40vh;
			}
		}

		.navbar-main {
			padding: 20rpx 0;
			background-color: #ffffff;

			.navbar-item {
				width: calc(100% / 4);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;

				.navbar-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}

				.navbar-name {
					font-size: 26rpx;
				}
			}
		}

		.service-main {
			.tabs-box {
				background-color: #ffffff;
			}

			.product-list {
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.product-item {
					width: 49%;
					overflow: hidden;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.product-pic {
						width: 100%;
						height: 200rpx;
						display: block;
					}

					.product-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #ffffff;
						padding: 10rpx;

						.name {
							font-size: 26rpx;
							font-weight: bold;
						}

						.price {
							font-size: 26rpx;
							font-weight: bold;
							color: #ff0000;
						}
					}
				}
			}
		}

		.news-main {
			padding: 20rpx;

			.news-title {
				font-size: 32rpx;
				margin-bottom: 20rpx;
				font-weight: bold;
				padding-left: 20rpx;
				position: relative;

				&::after {
					content: "";
					width: 8rpx;
					height: 36rpx;
					border-radius: 4rpx;
					background-color: #3c9cff;
					position: absolute;
					left: 0;
					top: 4rpx;
				}
			}

			.news-item {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;

				.news-pic {
					width: 240rpx;
					height: 170rpx;
					border-radius: 10rpx;
					display: block;
					margin-right: 20rpx;
				}

				.news-info {
					flex: 1;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-bottom: 2rpx solid #f0f0f0;
					padding: 6rpx 0;
					box-sizing: border-box;

					.news-name {
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.news-desc {
						font-size: 26rpx;
						color: #999999;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.news-info-bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.study-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
		margin-left: 20rpx;
		position: relative;

		&::after {
			content: "";
			width: 8rpx;
			height: 36rpx;
			border-radius: 4rpx;
			background-color: #3c9cff;
			position: absolute;
			left: 0rpx;
			top: 30rpx;
		}
	}

	.country-list {
		margin: 20rpx;

		.country-item {
			width: 48%;
			margin: 1%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #fff;

			.country-flag {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin: 0 auto 10rpx;
				display: block;
				border: 2rpx solid #f0f0f0;
			}

			.country-content {
				text-align: center;

				.country-name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
					color: #333;
				}

				.country-advantages {
					display: flex;
					flex-direction: column;
					gap: 8rpx;

					.advantage-tag {
						padding: 6rpx 16rpx;
						background-color: #f0f7ff;
						color: #3c9cff;
						border-radius: 24rpx;
						font-size: 24rpx;
						margin: 0 auto;
						width: fit-content;
					}
				}
			}
		}
	}
</style>